import React, { useEffect, useRef, useState } from "react";
import classnames from "classnames";
import useRecord from "@/components/pages/stores/useRecord";
import { Button } from "antd-mobile";
import { navigateTo } from "@/utils";

const pageName = "gift";
const klassName = pageName.replace(/\./g, '-');

export default function RuleComp({item, handler}) {
  if (!item) return null;

  const useResult = {
    1: {
      title: `恭喜获得`,
    },
    2: {
      title: `恭喜获得`,
    },
    3: {
      title: `恭喜获得`,
    },
    4: {
      title: `恭喜获得`
    },
    5: {
      title: <>
        很遗憾 <br />
        差一点就中奖啦！
      </>
    }
  }

  return (
    <div className={classnames(`cp-${klassName}`)}>
      <div className="inner">
        <div className="content">
          <div className="inner">
            <div className="title">
              {useResult[item?.category]?.title}
            </div>

            <div className="price" style={{backgroundImage: `url(${item.icon})`}}>
            </div>

            <div className="subtitle">
              {item?.name}
            </div>
          </div>

        </div>
        <div className="operation">
          <Button className={`act-btn act-btn-diamond`} onClick={e => navigateTo(`/task`)}>返回首页</Button>
          {
            item?.today_remain_draw_num > 0 &&
            <Button className={`act-btn act-btn-bevel`} onClick={e => handler.destroy()}>再抽一次</Button>
          }
        </div>
      </div>
    </div>
  )
}

